<template>
    <div>
        <div>
            <img class="img1" src="../assets/imgs/ly2.png" alt="tour vue">
        </div>
        <div>
            <van-grid clickable :column-num="4" route>
                <van-grid-item icon-color="red" icon="like" text="景点" to="/view" />
                <van-grid-item icon-color="red" icon="wap-home" text="酒店" to="/" />
                <van-grid-item icon-color="red" icon="logistics" text="租车" to="/" />
                <van-grid-item icon-color="red" icon="fire-o" text="美食" to="/food" />

            </van-grid>
            <van-grid clickable :column-num="4" route>
                <van-grid-item icon-color="red" icon="video" text="娱乐" to="/" />
                <van-grid-item icon-color="red" icon="point-gift-o" text="特产" to="/goodsList" />
                <van-grid-item replace to="/guide" icon-color="red" icon="guide-o" text="导航" />
                <van-grid-item icon-color="red" icon="idcard" text="门票" to="/ticket" />

            </van-grid>
        </div>
      <div>
        <div>
          <van-divider
              :style="{ color: '#1989fa', borderColor: '#1989fa',fontSize:'1.3rem', padding: '0 16px' }"
          >
            漫游地图
          </van-divider>
        </div>
        <div>
          <div id="dvmap"></div>
        </div>
      </div>
      <div style="height: 10rem">

      </div>
    </div>
</template>

<script>
import { ref } from 'vue';
    export default {
        name: "Home",
        mounted() {
            //页面加载就调用
            var map = new BMapGL.Map("dvmap");
            console.log(map);
            // 创建地图实例
            var point = new BMapGL.Point(112.465173,34.600972);
            // 创建点坐标
            map.centerAndZoom(point, 15);
            // 初始化地图，设置中心点坐标和地图级别
        },
      setup() {
        const active = ref(0);
        return { active };
      },
    }
</script>

<style scoped>
.img1{
    width: 100%;
    height: 7rem;
}
#dvmap{
    height: 30rem;
    width:100%;
}
</style>
